<!--
 @description 知识库文件
 @fileName FileList.vue
 @author zengqiongying
 @created 2023/04/13 15:56:50
-->
<template>
  <div class="file-list">
    <List ref="qmpList" v-model:finished="finished" :reset-fun="resetData" :load="load" :refresh="load">
      <div class="item" v-for="(item, i) in list" :key="i" @click="onDownLoad(item)">
        {{ item.attachmentName }}
      </div>
    </List>
  </div>
</template>

<script lang="ts">
  import { ref, reactive, toRefs, watch, nextTick, defineComponent } from 'vue'
  import List from '@/components/List/index.vue'
  import { getTemplateAttachmentPage } from '@/apis/common'
  import { createDownload } from '@/utils/download'
  export default defineComponent({
    name: 'FileList',
    components: { List },
    props: {
      searchValue: {
        type: String,
        default: ''
      },
      isHome: {
        type: Boolean,
        default: false
      }
    },
    setup(props) {
      const qmpList = ref()
      const data = reactive({
        list: [],
        finished: false
      })
      const load = async (page: number, rows: number) => {
        const params = {
          page,
          rows,
          name: props.searchValue
        }
        return getTemplateAttachmentPage(params).then((res: any) => {
          const resData = res.data
          const list = resData.records
          if (page === 1) {
            data.list = list
          } else {
            data.list = data.list.concat(list)
          }
          if (props.isHome) {
            data.finished = true
            return
          }
          if (resData.total <= data.list.length) {
            data.finished = true
          }
        })
      }
      const resetData = () => {
        data.list = []
      }
      const resetPageData = () => {
        qmpList.value.resetPageData()
      }

      watch(
        () => props.searchValue,
        () => {
          nextTick(() => {
            resetPageData()
          })
        }
      )

      const onDownLoad = (data: any) => {
        createDownload(data)
      }

      return {
        ...toRefs(data),
        load,
        resetData,
        qmpList,
        onDownLoad
      }
    }
  })
</script>
<style lang="less" scoped>
  .file-list {
    padding: 16px 14px;
    .item {
      padding: 8px 0;
      margin-bottom: 8px;
      font: var(--font-main-body);
      color: var(--texticon-default-strong);
    }
  }
</style>
